import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";
import { useQuery, useMutation } from "convex/react";
import { api } from "../convex/_generated/api";
import { useCallback } from "react";
import { useAuth0 } from "@auth0/auth0-react";

const Home = () => {
  const counter = useQuery(api.counter.get, { counterName: "clicks" }) ?? 0;
  const increment = useMutation(api.counter.increment);
  const incrementByOne = useCallback(
    () => increment({ counterName: "clicks", increment: 1 }),
    [increment],
  );
  const { logout } = useAuth0();

  return (
    <div className={styles.container}>
      <Head>
        <title>Next.js with Convex</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js</a> with{" "}
          <a href="https://convex.dev">Convex</a>
        </h1>

        <p className={styles.description}>
          {"Here's the counter:"} {counter}
        </p>
        <button className={styles.button} onClick={incrementByOne}>
          Add One!
        </button>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://www.convex.dev/"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{" "}
          <span className={styles.logo}>
            <Image src="/convex.svg" alt="Convex Logo" width={90} height={18} />
          </span>
        </a>
      </footer>
      <button className={styles.button} onClick={() => logout()}>
        logout
      </button>
    </div>
  );
};

export default Home;
